<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="item">
        <div class="city">当前城市</div>
        <ul class="btn-list">
          <li class="btn-wrapper">
            <div class="btn">{{this.$store.state.city}}</div>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="city">热门城市</div>
        <ul class="btn-list">
          <li
            class="btn-wrapper"
            v-for="item in hotcity"
            :key="item.id"
            @click="handCityClick(item.name)"
          >
            <div class="btn">{{item.name}}</div>
          </li>
        </ul>
      </div>
      <div class="item"
           v-for="(item,key) in cities"
           :key="key"
           :ref="key"
      >
        <div class="city">{{key}}</div>
        <ul class="item-list" v-for="text in item" :key="text.id">
          <li class="item" @click="handCityClick(text.name)">{{text.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入scroll实现列滚动
  import Bscroll from 'better-scroll'
  export default {
    name: 'List',
    mounted () {
      this.scroll = new Bscroll(this.$refs.wrapper)
    },
    props: {// 接受数据
      cities: Object,
      hotcity: Array,
      letter: String
    },
    methods: {
      handCityClick (city) {
        this.$store.dispatch('changeCity', city)
        // console.log(city)
        this.$router.push('/') // 编程式路由
      }
    },
    watch: {
      letter () { // 监听letter的变化
        if (this.letter) {
          const element = this.$refs[this.letter][0] // 找到对应的DOM
          this.scroll.scrollToElement(element) // 跳转
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .list{
    position:absolute;
    top:.87rem;
    left:0;
    bottom:0;
    right:0;
    overflow :hidden;
    .item{
      .city{
        background-color:#f5f5f5;
        padding-left :.1rem;
        height:.28rem;
        line-height .28rem;
        border-bottom :.01rem solid #cacaca;
      }
      .btn-list{
        overflow:hidden;
        box-sizing border-box;
        padding:.05rem .3rem .05rem .05rem;
        .btn-wrapper{
          width:33.3%;
          float:left;
          .btn{
            border:.01rem solid gray;
            text-align center;
            margin:.05rem;
            border-radius :.03rem;
            padding:.05rem 0;
          }
        }
      }
      .item-list{
        .item{
          padding-left :.1rem;
          border-bottom:.01rem solid #ccc;
          height:.36rem;
          line-height .36rem;
        }
      }
    }
  }
</style>
